<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>
        <a v-link="{path:'/home'}">Home</a>
        <a v-link="{path:'/about'}">About</a>
    </div>
    <router-view></router-view>
    <template id="home">
        <div><h1>Home</h1><p>{{msg}}</p></div>
        <div>
            <ul class="nav nav-tabs">
                <li>
                    <a v-link="{path:'/home/news'}">News</a>
                </li>
                <li>
                    <a v-link="{path:'/home/message'}">Messages</a>
                </li>
            </ul>
            <router-view></router-view>
        </div>
    </template>
    <template id="news">
        <ul>
            <li>news 01</li>
            <li>news 02</li>
            <li>news 03</li>
        </ul>
    </template>
    <template id="message">
        <ul>
            <li>message 01</li>
            <li>message 02</li>
            <li>message 03</li>
        </ul>
    </template>

</div>
</body>
<script src="vue.js"></script>
<script src="vue-router.min.js"></script>
<script>
    var Home = Vue.extend({
        template:'#home',
        data:function () {
            return{
                msg:'Hello,vue router!'
            }
        }
    });
    var News = Vue.extend({
        template:'#news'
    });
    var Message = Vue.extend({
        template:'#message'
    });
    var About = Vue.extend({
        template:'<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
    });
    var router = new VueRouter();
    router.map(
        {
            '/home':{
                component:Home,
                subRoutes:{
                    '/news':{
                        component:News
                    },
                    '/message':{
                        component:Message
                    }
                }
            },
            '/about':{
                component:About
            }
        }
    );
    var App = Vue.extend({});
    router.start(App,'#app')
</script>
</html>